
<template>
  <div style="padding-left: 30px;height: 30px;">
    <tiny-pager
        layout="total,prev,pager,next,sizes"
        align="left"
        :page-sizes="[50,500,1000]"
        v-model:page-size="pageSize"
        :total="total"
        :current-page="currentPage"
        :size="size"
        @current-change="changePage"
        @size-change="sizeChange"
    />
  </div>
</template>

<script setup>
import {ref} from "vue";
import {TinyPager} from "@opentiny/vue";
const props = defineProps({
  inject: {type: Boolean, default: false},
  size: {type: String, default: 'mini'},
})
const emit = defineEmits(['change'])
const fApi = ref({})

const total = ref(0)
const pageSize = ref(50)
const currentPage = ref(1)

const changePage = (current) => {
  currentPage.value = current
  if(props.inject) {
    emit('change', fApi.value)
  }
  else {
    emit('change')
  }
}
const sizeChange = () => {
  currentPage.value = 1
  if(props.inject) {
    emit('change', fApi.value)
  }
  else {
    emit('change')
  }
}

const setApi = (api) => {
  fApi.value = api
}
const getData = () => {
  return {
    currentPage: currentPage.value,
    pageSize: pageSize.value,
  }
}
const setTotal = (val) => {
  total.value = val
}

defineExpose({setApi, getData, setTotal})


</script>



<style scoped lang="scss">

</style>